<template>
  <div class="quick-start">
    <div class="quick-start-header-box">
      <div class="quick-start-header">
        <h1>第一个项目</h1>
        <p>你可以选择创建一个新的项目，或者克隆一个项目：</p>
        <el-button class="header-btn" type="primary" @click="routeTo('/project/create')">创建新的项目</el-button>
      </div>
    </div>
    <div class="quick-demo-box">
      <p class="quick-demo-box-title">我们为你准备了一个示例项目，直接克隆项目试试：</p>
      <div class="quick-demo">
        <div class="demo-tag">
          <img :src="demoProject.fileImage">
          <div class="tag-content">
            <div class="tag-title" @click="toDetail">{{demoProject.projectName}}</div>
            <div class="tag-desc">{{demoProject.profile}}</div>
            <div class="tag-footer">
              <span>@{{demoProject.userName}}<span class="tag-footer-copynum"><i class="el-icon-share"></i>{{demoProject.copyNumber}} 次复制</span></span>
              <el-button size="mini" @click="cloneProject" :disabled="btnSubmitState" :class="{'disable': btnSubmitState}"><span class="clone-button"><i class="button-icon button-icon-fork" />{{btnSubmitInfo}}</span></el-button>
            </div>
          </div>
        </div>
        <p>还有更多公开项目，<a @click="routeTo('/openproject')">点击查看</a></p>
      </div>
      <div class="quick-doc">
        <ul>
          <li @click="windowOpen1">
            <img src="@/common/image/quick-doc1.png">
            <p>如何创建一个新的项目？</p>
          </li>
          <li @click="windowOpen2">
            <img src="@/common/image/quick-doc2.png">
            <p>项目和任务是什么关系？</p>
          </li>
          <li @click="windowOpen3">
            <img src="@/common/image/quick-doc3.png">
            <p>什么是公开项目？</p>
          </li>
          <li @click="windowOpen4">
            <img src="@/common/image/quick-doc4.png">
            <p>如何克隆公开项目？</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getPublicProjectExample, copyProject } from '@/api/project'

export default {
  data () {
    return {
      demoProject: {},
      // 克隆按钮禁止点击
      btnSubmitState: false,
      btnSubmitInfo: '克隆项目'
    }
  },
  methods: {
    // 路由跳转
    routeTo (path) {
      this.$router.push(path)
    },
    windowOpen1 () {
      window.open(`${process.env.VUE_APP_HELP}/help/md/2.1%20%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE.html`)
    },
    windowOpen2 () {
      window.open(`${process.env.VUE_APP_HELP}/help/md/1.1%20%E5%86%99%E5%9C%A8%E5%89%8D%E9%9D%A2.html`)
    },
    windowOpen3 () {
      window.open(`${process.env.VUE_APP_HELP}/help/md/2.4%20%E5%85%AC%E5%BC%80%E9%A1%B9%E7%9B%AE.html`)
    },
    windowOpen4 () {
      window.open(`${process.env.VUE_APP_HELP}/help/md/2.2%20%E5%85%8B%E9%9A%86%E9%A1%B9%E7%9B%AE.html`)
    },
    // 跳转详情
    toDetail () {
      this.$router.push({ path: '/openproject/detail', query: { id: this.demoProject.id } })
    },
    // 复制项目
    cloneProject () {
      this.btnSubmitInfo = '运行中'
      this.btnSubmitState = true
      this._copyProject()
    },
    // 获取公开项目事例
    _getPublicProjectExample () {
      getPublicProjectExample().then(res => {
        if (res.message && res.message.code === 0) {
          this.demoProject = res.data
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 复制项目
    _copyProject () {
      // let query = `?projectId=${this.demoProject.id}`
      const query = `?projectId=${this.demoProject.id}&jobIds=${this.demoProject.jobIds}`
      copyProject(query).then(res => {
        this.btnSubmitInfo = '克隆项目'
        this.btnSubmitState = false
        if (res.message.code === 0) {
          this.$message({ message: '复制成功', showClose: true, type: 'success' })
          this.$router.push('/project/list')
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      }).catch(() => {
        this.btnSubmitInfo = '克隆项目'
        this.btnSubmitState = false
      })
    }
  },
  mounted () {
    this._getPublicProjectExample()
  }
}
</script>

<style lang="stylus" scoped>
.quick-start
  .quick-start-header-box
    background #F4F7F8
    .quick-start-header
      padding 20px 0
      width 100%
      position relative
      margin 0 auto
      max-width 1162px
      >h1
        font-size 28px
        color #2D323B
        font-weight 600
        padding 20px 0
      >p
        font-size 14px
        color #2D323B
        padding-bottom 40px
  .quick-demo-box
    padding 20px 0
    width 100%
    position relative
    margin 0 auto
    max-width 1162px
    .quick-demo-box-title
      font-size 14px
      color #4A4A4A
      padding 20px 0
    .quick-demo
      width 100%
      position relative
      margin 0 auto
      max-width 1162px
      .demo-tag
        display flex
        width 710px
        background #FFFFFF
        border 1px solid #E8E8E8
        border-radius 3px
        padding 20px
        >img
          width 107px
          height 107px
          background-size 107px 107px
          margin-right 29px
        .tag-content
          width 100%
          .tag-title
            font-size 20px
            color #1890ff
            letter-spacing 0
            font-weight 600
            cursor pointer
          .tag-desc
            height 40px
            line-height 20px
            font-size 14px
            color #6E6E6E
            overflow hidden
            text-overflow ellipsis
            display -webkit-box
            /*! autoprefixer: off */
            -webkit-box-orient vertical
            /* autoprefixer: on */
            -webkit-line-clamp 2
            margin 7px 0 10px
          .tag-footer
            display flex
            justify-content space-between
            align-items flex-end
            .tag-footer-copynum
              padding-left 31px
            .clone-button
              display flex
              align-items center
              font-size 12px
              color #2196F3
            .button-icon
              display inline-block
              width 12px
              height 17px
              background-repeat no-repeat
              background-size 12px 17px
              margin-right 10px
            .button-icon-fork
              background-image url('../../common/image/icon/fork.png')
      >p
        font-size 14px
        padding 20px 0
        color #4A4A4A
  .quick-doc
    padding-top 55px
    >ul
      display flex
      justify-content space-between
      >li
        width 268px
        background #F4F7F8
        border-radius 1px
        padding 35px
        display flex
        flex-direction column
        align-items center
        cursor pointer
        >img
          width 30px
          height 30px
          background-size 30px 30px
          margin-bottom 23px
        >p
          font-size 14px
          color #2D323B
</style>
